<template>
	<view class="main">
		<image src="../../../static/images/login-logo.png" class="logo"></image>
		<view class="title">掌上半岛·产业园地图</view>
		<view class="box">
			<view class="welcome">
				欢迎登录
			</view>
			<view class="box">
				
				<input class="input" placeholder="请输入手机号" v-model="account"/>
				<input class="input" placeholder="请输入密码" v-model="password" password />
				<view class="btn" @click="login">登录</view>
				<view class="row-between">
					<view class="registe" @click="goRegiste">注册账号</view>
					<view class="forget" @click="goForget">忘记密码</view>
				</view>
				<view style="height: 60rpx;"></view>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			account: ''
			, password: ''
			};
		},
		methods:{
			login(){
				uni.navigateTo({
					url:'./details'
				})
			},
			// async login(){
			// 	// uni.navigateTo({
			// 	// 	url:'./index'
			// 	// })
			// 	  if (!this.account) {
			// 	        this.$noIconTost('请输入手机号')
			// 	        return
			// 	      }
			// 	      if (!this.password) {
			// 	        this.$noIconTost('请输入密码')
			// 	        return
			// 	      }
					  
			// 	let res = await this.$req({
			// 		url: `/mng/user/login/phoneAndPassword`,
			// 		method:'post',
			// 		data: { account: this.account, password: this.password,  readRoles: 'false', terminal: 'WEB' }
			// 	})
			// 	if(res.code ==200){
			// 		uni.setStorageSync('token',res.data.token)
			// 		uni.setStorageSync('userId',res.data.id)
			// 		uni.redirectTo({
			// 			url:'./index'
			// 		})
			// 	}
			// },
			goRegiste(){
				uni.navigateTo({
					url:'./registe'
				})
			},
			goForget(){
				uni.navigateTo({
					url:'./forget'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url(@/static/images/login-bg.png);
		background-size: 100% 100%;
		align-items: center;
	}

	.logo {
		margin-top: 60rpx;
		width: 196rpx;
		height: 196rpx;
	}

	.title {
		margin-top: 32rpx;
		font-size: 48rpx;
		font-weight: 600;
		color: #2A2F3E;
		line-height: 64rpx;
	}

	.welcome {
		margin-top: 60rpx;
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2A2F3E;
		line-height: 56rpx;
	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
		width: calc(100% - 96rpx);
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.input {
		padding-left: 32rpx;
		margin-top: 40rpx;
		width: calc(100% - 48rpx );
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 2rpx solid #CDD5DF;
		
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111F3A;
		line-height: 44rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		width: calc(100% - 48rpx );
		height: 96rpx;
		background: #004E96;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 48rpx;
		
	}
	.btn-text{
	
	}
	.row-between {
		margin-top: 60rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.registe {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #004E96;
		line-height: 44rpx;
	}

	.forget {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111F3A;
		line-height: 44rpx;

	}
</style>
